<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="8" style="text-align: left">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     :loading="downloadLoading" icon="el-icon-download" @click="exportExcel">导出
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     @click="quitOutShip" icon="el-icon-edit">退库作业
          </el-button>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="ownerId">客户</el-checkbox>
                  <el-checkbox label="ownerOrderNo">订单号</el-checkbox>
                  <el-checkbox label="lotNo1">车架号</el-checkbox>
                  <el-checkbox label="carrierName">承运商</el-checkbox>
                  <el-checkbox label="materielId">车型名称</el-checkbox>
                  <el-checkbox label="materielName">车型描述</el-checkbox>
                  <el-checkbox label="plateNumber">车牌号</el-checkbox>
                  <el-checkbox label="lotNo2">物料编码</el-checkbox>
                  <el-checkbox label="lotNo3">颜色代码</el-checkbox>
                  <el-checkbox label="lotNo4">车型代码</el-checkbox>
                  <el-checkbox label="genMethod">创建方式</el-checkbox>
                  <el-checkbox label="locationNo">库位</el-checkbox>
                  <el-checkbox label="outboundStatus">出库状态</el-checkbox>
                  <el-checkbox label="prepareStatus">备料状态</el-checkbox>
                  <el-checkbox label="preparetor">备料员</el-checkbox>
                  <el-checkbox label="outboundUser">出库人</el-checkbox>
                  <el-checkbox label="storeHouseName">发货仓库</el-checkbox>
                  <el-checkbox label="gmtCreate">出库时间</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <div :class="{'search-transition':searchFlag,h0:true,hAuto:searchFlag,'search-content':true}">
      <el-form ref="form" :model="listQuery.condition" label-width="80px" :inline="true">
        <el-form-item label=车架号:>
          <el-input type="textarea" :rows="2" style="width: 250px"
                    v-model="listQuery.condition.vinNo"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
          <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="listQuery.condition.vinNo"></el-input>-->
        </el-form-item>
        <el-form-item label="车型:">
          <el-input placeholder="请输入车型名称" class="w200" clearable v-model="listQuery.condition.materielCode"></el-input>
        </el-form-item>
        <el-form-item label="出库时间:">
          <el-date-picker class="w200" v-model="listQuery.condition.startDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
          <span style="padding: 0 6px">至</span>
          <el-date-picker class="w200" v-model="listQuery.condition.endDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>
    <el-table ref="paymentTable" :data="paymentList" v-loading="listLoading" element-loading-text="加载中" @selection-change="handleSelectionChange"
              border fit
              highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'genMethod'">{{scope.row[value.key] | putawayGenMethodFilter}}</div>
          <div v-else-if="value.key === 'outboundStatus'">{{scope.row[value.key] | noticeLineStatusFilter}}</div>
          <div v-else-if="value.key === 'prepareStatus'">{{scope.row[value.key] | prepareLineStatusFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
    <!--退库弹窗-->
    <el-dialog title="退库作业" width="50%" :visible.sync="quitDialogVisible" @close="handleQuitClose">
      <hr>
      <el-row>
        <el-col style="width: 120px;text-align: right;margin-right: 10px;line-height: 32px;height: 32px;">车架号(vin)
        </el-col>
        <el-input placeholder="vin码-回车查询" v-model="quitQueryParams.lotNo1"
                  style="margin-right: 10px;width: 200px" clearable @keyup.enter.native="getQuitInfo"/>
        <span>
          <el-button type="primary" :disabled="(quitParams.noticeLineStatus !== '30' && quitParams.noticeLineStatus !== '50') || quitEnable"
                     @click="confirmQuitShip">确认退库</el-button>
        </span>
      </el-row>
      <hr>
      <el-form ref="outShipForm" :model="quitParams" label-width="120px" :inline="true">
        <el-form-item label="订单号: ">
          <div class="w200 printBig">{{isBlank(quitParams.ownerOrderNo)}}</div>
        </el-form-item>
        <el-form-item label="VIN: ">
          <div class="w200 printBig">{{isBlank(quitParams.lotNo1)}}</div>
        </el-form-item>
        <el-form-item label="车型/物料代码:">
          <div class="w200 printBig">{{isBlank(getQuitVehicle())}}</div>
        </el-form-item>
        <el-form-item label="货主: ">
          <div class="w200 printBig">{{isBlank(quitParams.ownerId)}}</div>
        </el-form-item>
        <el-form-item label="出库时间: ">
          <div class="w200 printBig">{{isBlank(quitParams.gmtCreate)}}</div>
        </el-form-item>
        <el-form-item label="选择入库库区">
          <el-select class="w200" v-model="selectArea.areaId" @change="areasChange" placeholder="请选择库区">
            <el-option v-for="sArea in areaList" :label="sArea.storeAreaName" :value="sArea.storeAreaId"
                       :key="sArea.storeAreaId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择入库库位">
          <el-select class="w200" v-model="selectArea.locationId" placeholder="请选择库位">
            <el-option v-for="sLocation in storeLocationList" :label="sLocation.name" :value="sLocation.id"
                       :key="sLocation.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退库原因">
          <el-input type="textarea" :rows="4" style="width: 250px"
                    v-model="selectArea.remark"  placeholder="请输入退库原因"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import * as outboundShipAPI from '@/api/outbound/outboundShip'
  import waves from '@/directive/waves' // 水波纹指令
  const defautlTableThead = [
    { key: 'ownerId', title: '客户', width: '' },
    { key: 'ownerOrderNo', title: '订单号', width: '' },
    { key: 'lotNo1', title: '车架号', width: 180 },
    { key: 'carrierName', title: '承运商', width: '' },
    { key: 'materielId', title: '车型名称', width: '' },
    { key: 'materielName', title: '车型描述', width: '' },
    { key: 'plateNumber', title: '车牌号', width: '' },
    { key: 'lotNo2', title: '物料编码', width: '' },
    { key: 'lotNo3', title: '颜色代码', width: '' },
    { key: 'lotNo4', title: '车型代码', width: '' },
    { key: 'genMethod', title: '创建方式', width: '' },
    { key: 'locationNo', title: '库位', width: '' },
    { key: 'outboundStatus', title: '出库状态', width: '' },
    { key: 'prepareStatus', title: '备料状态', width: '' },
    { key: 'preparetor', title: '备料员', width: '' },
    { key: 'outboundUser', title: '出库人', width: '' },
    { key: 'storeHouseName', title: '发货仓库', width: '' },
    { key: 'gmtCreate', title: '出库时间', width: 130, fixed: 'right' }
  ]
  export default {
    name: 'payment',
    directives: {
      waves
    },
    data() {
      return {
        theadCheckVal: [
          'ownerId',
          'ownerOrderNo',
          'lotNo1',
          'carrierName',
          'materielId',
          'materielName',
          'plateNumber',
          'lotNo2',
          'lotNo3',
          'lotNo4',
          'genMethod',
          'locationNo',
          'outboundStatus',
          'prepareStatus',
          'preparetor',
          'outboundUser',
          'storeHouseName',
          'gmtCreate'
        ],
        tableThead: defautlTableThead,
        search: {},
        listQuery: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
          }
        },
        paymentList: [],
        listLoading: true,
        downloadLoading: false,
        downloadData: [],
        multipleSelection: [],
        quitDialogVisible: false,
        selectArea: {
          areaId: '',
          locationId: '',
          remark: ''
        },
        areaList: [{
          storeLocationList: [],
          storeAreaId: null,
          storeAreaName: null
        }],
        storeLocationList: [],
        quitParams: {},
        quitQueryParams: {
          lotNo1: null
        },
        quitEnable: false,
        searchFlag: false,
        timePicker: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        }
      }
    },
    created() {
      this.list()
    },
    watch: {
      theadCheckVal(valArr) {
        this.tableThead = defautlTableThead.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        // 列表查询
        this.$data.listLoading = true
        // 处理是否展开更多
        let queryParam = {}
        if (this.$data.searchFlag) {
          queryParam = this.$data.listQuery
        } else {
          Object.assign(queryParam, this.$data.listQuery)
          queryParam.condition = {
          }
        }
        queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
        outboundShipAPI.queryOutShipLine(queryParam).then(result => {
          if (result.code === 0) {
            this.$data.paymentList = result.data.records
            this.$data.listQuery.total = result.data.total
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
          this.$data.listLoading = false
        })
      },
      changeStatus() {
        return this.downloadData.map(v => {
          if (v.genMethod === '10') {
            v.genMethod = '手工创建'
          } else if (v.genMethod === '20') {
            v.genMethod = '订单中心'
          } else if (v.genMethod === '30') {
            v.genMethod = 'OTM'
          } else if (v.genMethod === '40') {
            v.genMethod = 'APP'
          } else if (v.genMethod === '50') {
            v.genMethod = '君马'
          } else if (v.genMethod === '60') {
            v.genMethod = '扫码触发'
          } else if (v.genMethod === '70') {
            v.genMethod = '道闸'
          } else if (v.genMethod === '80') {
            v.genMethod = '自动触发'
          }
          return v
        })
      },
      exportExcel() {
        // 数据导出
        let queryParam = {}
        queryParam = this.listQuery.condition
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        this.downloadLoading = true
        outboundShipAPI.exportData(queryParam).then(result => {
          this.downloadLoading = false
          if (result.code === 0) {
            this.downloadData = result.data
            if (this.downloadData.length) {
              const arr = this.changeStatus()
              require.ensure([], () => {
                const { export_json_to_excel } = require('@/vendor/Export2Excel')
                const tHeader = ['客户', '车架号', '车型', '出库时间', '存储库位', '出库方式', '出库人']
                const filterVal = ['ownerId', 'lotNo1', 'materielId', 'gmtCreate', 'locationNo', 'genMethod', 'outboundUser']
                const data = this.formatJson(filterVal, arr)
                export_json_to_excel(tHeader, data, this.filename)
              })
            }
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      queryUsableLocation() {
        const queryParam = {}
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        outboundShipAPI.getUseAbleLocation(queryParam).then(result => {
          if (result.code === 0) {
            this.areaList = result.data
          } else {
            this.$message({
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      quitOutShip() {
        if (this.multipleSelection.length < 1) {
          this.$message({
            type: 'error',
            message: '请选择要退库数据',
            duration: 2000
          })
        } else {
          if (this.multipleSelection.length > 1) {
            this.$message({
              type: 'error',
              message: '不支持多选操作',
              duration: 2000
            })
          } else {
            this.quitQueryParams.lotNo1 = this.multipleSelection[0].lotNo1
            this.quitDialogVisible = true
            this.queryUsableLocation()
          }
        }
      },
      getQuitInfo() {
        const queryParam = {}
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        queryParam.lotNo1 = this.quitQueryParams.lotNo1
        queryParam.outShipLineId = this.multipleSelection[0].id
        this.quitEnable = true
        outboundShipAPI.getOutboundShipInfoForQuit(queryParam).then(result => {
          this.quitEnable = false
          if (result.code === 0) {
            this.quitParams = result.data
          }
        })
      },
      areasChange(val) {
        for (let i = 0; i < this.areaList.length; i++) {
          if (this.areaList[i].storeAreaId === this.selectArea.areaId) {
            this.storeLocationList = this.areaList[i].storeLocationList
            break
          } else {
            this.storeLocationList = []
          }
        }
      },
      confirmQuitShip() {
        const params = {}
        params.noticeLineId = this.quitParams.noticeLineId
        params.houseId = this.$store.getters.currentStorehouse.id
        params.locationId = this.selectArea.locationId
        params.remark = this.selectArea.remark
        this.quitEnable = true
        outboundShipAPI.updateOutboundShipQuit(params).then(result => {
          this.quitEnable = false
          if (result.code === 0) {
            this.$notify({
              message: result.message,
              type: 'info',
              duration: 2000
            })
            this.handleQuitClose()
            this.list()
          }
        })
      },
      isBlank(val) {
        if (val) {
          return val
        } else {
          return '暂无信息'
        }
      },
      getQuitVehicle() {
        if (this.quitParams) {
          const lineInfo = this.quitParams
          if (lineInfo.materielCode) {
            return lineInfo.materielCode
          } else if (lineInfo.materielName) {
            return lineInfo.materielName
          } else {
            return ''
          }
        }
      },
      handleQuitClose() {
        this.quitDialogVisible = false
        this.selectArea.areaId = null
        this.selectArea.locationId = null
        this.quitParams = {}
        this.quitQueryParams = {
          lotNo1: null
        }
        this.areaList = [{
          storeLocationList: [],
          storeAreaId: null,
          storeAreaName: null
        }]
        this.storeLocationList = []
        this.list()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        // 分页size变化
        this.$data.listQuery.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.$data.listQuery.current = val
        this.list()
      },
      moreClick() {
        // 更多click
        this.$data.searchFlag = !this.$data.searchFlag
      },
      searchClick() {
        // 搜索
        this.list()
      },
      reset() {
        this.$data.listQuery.condition = {
          houseId: this.$store.getters.currentStorehouse.id,
          vinNo: null,
          materielCode: null,
          startDate: null,
          endDate: null
        }
        this.list()
      }
    }
  }
</script>
<style scoped>

</style>
